<template>
    <el-dialog :visible.sync="ListDialogVisible" title="数据展示" width="80%" :before-close="handleClose">
        <el-table style="width: 100%">
            <el-table-column label="ID" prop="id"></el-table-column>
            <el-table-column label="姓名" prop="name"></el-table-column>
            <el-table-column label="年龄" prop="age"></el-table-column>
        </el-table>
        aaa
        <!-- 分页 -->
        <!-- <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage"
            :page-sizes="[10, 20, 30, 40]" :page-size="pageSize" layout="total, sizes, prev, pager, next, jumper"
            :total="total"></el-pagination> -->
    </el-dialog>
</template>
  
<script>
import { ref, onMounted } from 'vue';
import { ElDialog, ElTable, ElTableColumn, ElPagination } from 'element-plus';

export default {
    components: {
        ElDialog,
        ElTable,
        ElTableColumn,
        ElPagination
    },
    props: {
        // 这里可以传入需要展示的数据
        // 例如: data: Array
        data: {
            type: Array,
            required: true
        },
        ListDialogVisible: {
            type: Boolean,
            required: true
        }
    },
    setup(props) {
        console.log('props', props);
        // 状态
        const dialogVisible = ref(false);
        const tableData = ref(props.data);
        const currentPage = ref(1);
        const pageSize = ref(10);
        const ListDialogVisible = ref(props.ListDialogVisible.ListDialogVisible);

        // 打开弹框
        const openDialog = () => {
            dialogVisible.value = true;
        };

        // 关闭弹框
        const handleClose = () => {
            dialogVisible.value = false;
        };

        // 每页显示数量变化
        const handleSizeChange = (val) => {
            pageSize.value = val;
        };

        // 当前页变化
        const handleCurrentChange = (val) => {
            currentPage.value = val;
        };

        // 在组件挂载后进行一些初始化操作，例如异步获取数据
        onMounted(() => {
            // 此处可以根据需要初始化数据等
        });

        return {
            dialogVisible,
            tableData,
            currentPage,
            pageSize,
            ListDialogVisible,
            openDialog,
            handleClose,
            handleSizeChange,
            handleCurrentChange
        };
    }
};
</script>
  
<style scoped>
/* 在这里可以添加样式以调整弹框和表格的样式 */
</style>